<template>
  <div>
    <div class="s-map">
      <el-row>
        <el-col :span="5">
          <div class="s-left2 collapse_view">
            <!-- 工程行政区分布统计 -->
            <div class="grid-content s-grade">
              <collapse-wrap title="近七日日常排查统计">
                <div ref="chartsWeekCount" class="bro-charts"></div>
              </collapse-wrap>
            </div>
            <!-- 工程所属行业占比统计 -->
            <div style="height: 100px">
              <collapse-wrap title="边坡隐患数量统计">
                <div ref="chartsTrade" class="brr-charts2"></div>
              </collapse-wrap>
              <collapse-wrap title="地质隐患类型数量统计">
                <div ref="chartsTrade2" class="brr-charts"></div>
              </collapse-wrap>
            </div>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="s-center2 collapse_view">
            <div class="search_view">
              <el-select v-model="form.roadId" filterable clearable placeholder="选择路线" @change="changeRoad">
                <el-option
                  v-for="item in roadList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
              <el-select v-model="form.roadSectionId" filterable clearable placeholder="选择标段" @change="initEchart">
                <el-option
                  v-for="item in sectionList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
              <el-select v-model="form.riskLevel" filterable clearable placeholder="选择风险等级" @change="initEchart">
                <el-option
                  v-for="item in EnumRiskLevelList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </div>
            <point-map :key="theKey" ref="map" class="point-map"></point-map>
            <collapse-wrap title="最新隐患数据">
              <!-- table -->
              <el-table :data="tableList" border stripe height="250" ref="table">
                <el-table-column prop="roadName" show-overflow-tooltip label="路线" min-width="200">
                </el-table-column>
                <el-table-column prop="roadSectionName" show-overflow-tooltip label="标段" min-width="180">
                </el-table-column>
                <el-table-column prop="name" show-overflow-tooltip label="隐患点名称" min-width="220">
                </el-table-column>
                <el-table-column prop="updateTime" label="发现日期" width="100">
                  <template slot-scope="scope">
                    {{scope.row.updateTime|formatTimer}}
                  </template>
                </el-table-column>
                <el-table-column prop="damageTypeName" show-overflow-tooltip label="隐患类型" width="100">
                </el-table-column>
                <el-table-column prop="nowRiskLevelName" label="风险等级" min-width="120">
                  <template slot-scope="scope">
                    <el-button size="mini" :style="scope.row.nowRiskLevel | gradeColor" class="s-white">
                      {{scope.row.nowRiskLevelName}}
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </collapse-wrap>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="s-right2 collapse_view">
            <!-- 设备统计 -->
            <div class="grid-content s-grade">
              <collapse-wrap title="基础数据统计">
                <div ref="chartsBaseCount" class="pie-charts"></div>
              </collapse-wrap>
            </div>
            <!-- 预警等级 -->
            <div class="grid-content s-grade">
              <collapse-wrap title="边坡总体风险等级占比">
                <div v-for="item in countWarn" :key="item.typeName">
                  <el-card shadow="always"
                           :class="item.type >2&&item.num>0?'blink grade-card':'grade-card'"
                           :style="item.type | gradeColor">
                    <i class="el-icon-s-operation"></i><i class="grade-word">{{item.typeName}}</i>
                    <div class="grade-box">
                      <p><span>数量：</span><span>{{item.num}}</span><span>，占比：</span><span>{{item.percent}}%</span></p>
                      <el-progress :show-text="false" class="s-progress" :percentage="item.percent"></el-progress>
                    </div>
                  </el-card>
                </div>
              </collapse-wrap>
            </div>
          </div>
        </el-col>
      </el-row>


    </div>
  </div>
</template>
<script>
import CollapseWrap from '@/components/collapse-wrap'
import PointMap from './investigation-map'
import Format from '@/utils/format'
import {
  getDamageInfoList,
  getBaseStatistics,
  getWeekCountStatistics,
  getInvestigateTypeStatistics,
  getRiskLevelStatistics,
} from '@/services/model/investigation.js'
import {getRoadSelectList, getRoadSectionSelectList} from '@/services/model/road-mgmt'
import Enums from '@/utils/enums'
const Echarts = require('echarts')
export default {
  mixins:[Enums],
  components: {
    CollapseWrap,
    PointMap
  },
  data() {
    return {
      onLinelist: '',
      myPieCharts: '',
      myBarCharts: '',
      formWarn: {
        page: 1,
        pageSize: 5
      },
      form: {
        page: 1,
        pageSize: 20
      },
      charts: '',
      countWarn: [],
      theKey: 1,
      roadList: [],
      sectionList: [],
      tableList: [],
      EnumRiskLevelList:[],
      tableWarnList: []
    }
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      if (timer) {
        return Format(new Date(timer), 'yyyy-MM-dd')
      }
    },
    gradeColor(val) {
      switch (val) {
        case 0:
          return 'background-color:#0DC26B'
        case 1:
          return 'background-color:#0073b7'
        case 2:
          return 'background-color:#f39c12'
        case 3:
          return 'background-color:#ff851b'
        case 4:
          return 'background-color:#e43321'
        default:
          return 'background-color:#ffffff'
      }
    }
  },
  computed: {
    newDatas() {
      return this.$store.state.newDataList
    }
  },
  watch: {
    newDatas(val) {
      if (val.type === 2) { // 预警
        this.tableWarnList.unshift(val.data)
      } else { // 非预警
        this.tableList.unshift(val.data)
      }
    }
  },
  methods: {
    seeDetail(row) {
      this.$router.push({
        path: '/info-mgmt'
      })
    },
    // 最新数据行点击
    clickData(row) {
      this.$router.push({
        path: `/project/${row.projectId}/work-point/${row.workPointId}/monitor/${row.monitorType}?activeId=${row.pointId}`
      })
    },
    //折线图
    broCharts(refFlag, timeList, slopeCount, damageCount) {
      this.myBroCharts = Echarts.init(refFlag, null, {
        locale: 'ZH'
      })
      let option = {
        title: {
          text: '',
          subtext: '',
          left: 'center',
          textStyle: {
            fontSize: '14',
            color: '#FFFFFF'
          }
        },
        color: ['#41ae3c', '#0073b7'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['公路边坡排查数', '公路地质排查数'],
          top: 'top',
          textStyle: {
            fontSize: '14',
            color: '#FFFFFF'
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: timeList,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: '10',
              color: '#ffffff',  //更改坐标轴文字颜色
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {

              color: '#ffffff',  //更改坐标轴文字颜色
            }
          }
        },
        series: [{
          name: '公路边坡排查数',
          data: slopeCount,
          type: 'line',
          areaStyle: {}
        },
          {
            name: '公路地质排查数',
            data: damageCount,
            type: 'line',
            areaStyle: {}
          }
        ]
      }
      this.myBroCharts.setOption(option)
    },
    // 柱状图
    barCharts(refFlag, nameList, normalCount, importantCount) {
      this.myBarCharts = Echarts.init(refFlag, null, {
        locale: 'ZH'
      })
      let option = {
        color: ['#e43321', '#0073b7'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['重大隐患', '一般隐患'],
          top: 'top',
          textStyle: {
            fontSize: '14',
            color: '#FFFFFF'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          minInterval: 1,
          boundaryGap: [0, 0.01],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff',  //更改坐标轴文字颜色
            }
          }
        },
        yAxis: {
          type: 'category',
          data: nameList,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff',  //更改坐标轴文字颜色
            }
          }
        },
        series: [
          {
            name: '重大隐患',
            type: 'bar',
            data: importantCount
          },
          {
            name: '一般隐患',
            type: 'bar',
            data: normalCount
          },
        ]
      }
      this.myBarCharts.setOption(option)
    },
    // 饼图
    pieCharts(color, refFlag, nameList, val, name) {
      this.myPieCharts = Echarts.init(refFlag, null, {
        locale: 'ZH'
      })
      let option = {
        title: {
          text: '',
          subtext: '',
          left: 'center',
          textStyle: {
            fontSize: '14',
            color: '#FFFFFF'
          }
        },
        color: color,
        tooltip: {
          position: 'fixed',
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [{
          name: name,
          type: 'pie',
          // radius: '55%',
          center: ['50%', '50%'],
          data: val,
          itemStyle: {
            borderRadius: 8
          },
          label: {
            formatter: '{name|{b}}{num|{c}}',
            rich: {
              time: {
                fontSize: 10,
                color: '#999'
              }
            }
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      this.myPieCharts.setOption(option)
    },
    // 最新数据
    async queryList() {
      let res = await getDamageInfoList(this.form)
      this.tableList = res.data ? res.data : []
    },
    // 风险等级占比图
    async getRiskLevelStatistics() {
      let res = await getRiskLevelStatistics(this.form)
      let countWarn = res.data ? res.data : []
      if (countWarn.allCount === 0) {
        this.countWarn = countWarn.itemList.map((item) => {
          return {
            ...item,
            percent: 0
          } // 占比
        })
      } else {
        this.countWarn = countWarn.itemList.map((item) => {
          return {
            ...item,
            percent: parseInt(item.num / countWarn.allCount * 100)
          } // 占比
        })
      }
    },
    // 排查类型统计
    async getInvestigateTypeStatistics() {
      let res = await getInvestigateTypeStatistics(this.form)
      let item = res.data
      let slopeNameList = ['边坡隐患']
      let slopeDataNormal = [item.normalCount[0]]
      let slopeDataImportant= [item.importantCount[0]]
      let dizhiNameList = item.nameList.splice(0,5)
      let dizhiNormal = item.normalCount.splice(0,5)
      let dizhiImportant = item.importantCount.splice(0,5)
      this.barCharts(this.$refs.chartsTrade, slopeNameList, slopeDataNormal, slopeDataImportant, '边坡隐患数量统计')
      this.barCharts(this.$refs.chartsTrade2, dizhiNameList, dizhiNormal, dizhiImportant, '地质隐患类型数量统计')
    },
    // 近七日排查数折线统计
    async getWeekCountStatistics() {
      let res = await getWeekCountStatistics(this.form)
      let item = res.data
      this.broCharts(this.$refs.chartsWeekCount, item.nameList, item.slopeCount, item.damageCount, '近七日日常排查统计')
    },
    async getBaseStatistics() {
      let res = await getBaseStatistics(this.form)
      let list = res.data ? res.data : []
      let nameList = list.map(x => x.typeName)
      let val = list.map(x => {
        return {
          value: x.num,
          name: x.typeName,
        }
      })
      let color = ['#45C2E0', '#C1EBDD', '#FFC851', '#41ae3c']
      this.pieCharts(color, this.$refs.chartsBaseCount, nameList, val, '基础数据统计')
    },
    // echart随着窗口改变
    echartResize() {
      if(this.myPieCharts){
        this.myPieCharts.resize()
      }
      if(this.myBarCharts){
        this.myBarCharts.resize()
      }
      if( this.myBroCharts){
        this.myBroCharts.resize()
      }
    },
    //获取路线列表
    async getRoadList() {
      const {data} = await getRoadSelectList()
      this.roadList = data
    },
    //选择路线
    changeRoad() {
      this.$set(this.form, 'roadSectionId', ''); //强制刷新 https://blog.csdn.net/PGguoqi/article/details/90240650
      this.bidSectionList = []
      const {roadId} = this.form
      this.getBidSectionList(roadId)
      this.initEchart()
    },
    //根据路线id获取标段列表
    async getBidSectionList(roadId) {
      const {data} = await getRoadSectionSelectList({roadId: roadId})
      this.sectionList = data
    },
    initEchart() {
      // 基础数据统计
      this.getBaseStatistics()
      // 近七日日常排查统计
      this.getWeekCountStatistics()
      // // 排查类型统计
      this.getInvestigateTypeStatistics()
      // 风险等级占比图
      this.getRiskLevelStatistics()
      this.$nextTick(() => {
        this.$refs.map.getMapList(this.form)
      })
      this.queryList()
      window.addEventListener('resize', this.echartResize)
    }
  },
  created() {
  },
  mounted() {
    this.queryDictList(['EnumRiskLevel'], ['EnumRiskLevelList'])
    this.getRoadList()
    // 拿到表格挂载后的真实DOM
    const table = this.$refs.table
    // 拿到表格中承载数据的div元素
    const divData = table.bodyWrapper
    // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
    setInterval(() => {
      // 元素自增距离顶部1像素
      divData.scrollTop += 1
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
        // 重置table距离顶部距离
        divData.scrollTop = 0
      }
    }, 200)
    this.initEchart()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.echartResize)
  }
}
</script>
<style lang="less">


  body {
    height: 100%;
    width: 100%;
  }

  .router_wrap {
    padding: 5px 0 0 0 !important;
    /*background-color: rgb(42, 42, 42);*/
  }

  .s-map {
    background-color: rgb(42, 42, 42);
    line-height: 20px;
    width: 100%;
    position: relative;
    /*height: 1030px;*/

    .weather {
      height: 100px;
      width: 300px;
      margin: 0 auto;
    }

    .point-map {
      width: 100%;
      height: 560px;
    }

    .s-left2 {
      left: 0px;
      top: 0;
      background-color: rgb(42, 42, 42);
    }

    .s-center2 {
      align-content: center;
      bottom: 0;
      background-color: rgb(42, 42, 42);

      .on-line {
        /deep/ .el-card {
          background-color: rgb(42, 42, 42);
          font-size: 16px;
        }

        margin-bottom: 10px;
      }

      .content {
        padding: 5px 5px 5px;
      }

      .el-table {
        th {
          background-color: rgb(42, 42, 42) !important;
        }

        td {
          background-color: #878787 !important;
          color: white;
        }

        td, th {
          padding: 5px !important;
        }
      }
    }

    .collapse_view {
      .collapse {
        background-color: rgb(42, 42, 42);;

        .title {
          padding: 5px 10px;
          background-color: #1990FE;
        }

        .text {
          color: white !important;
        }

        /deep/ .content {
          padding: 5px 10px !important;
        }
      }
    }


    .s-right2 {
      background-color: rgb(42, 42, 42);
      right: 0px;
      top: 0;
      /*.pie-left{*/
      /*  float:left;*/
      /*  width: 50%;*/
      /*}*/
    }

    .pie-charts {
      height: 250px;
    }
    .bro-charts {
      height: 220px;
    }
    .brr-charts {
      height: 350px;
    }
    .brr-charts2 {
      height: 130px;
    }

  }

  .s-white {
    color: #FFFFFF;
  }

  .grade-card {
    color: #FFFFFF;
    margin-bottom: 8px;
    font-size: 13px;

    /deep/ .el-card__body {
      padding: 8px;
    }

    /deep/ .el-card__body i,
    .el-card__body .grade-box {
      display: inline-block;
      vertical-align: middle;
    }

    .grade-box {
      /*width: 45%;*/
    }

    /deep/ .s-progress {
      display: block;
      width: 100%;

      /deep/ .el-progress-bar__outer {
        width: 100%;
      }
    }

    .grade-word {
      font-weight: 600;
      font-size: 18px !important;
      width: 65px;
    }

    i {
      padding-right: 7px;
      font-size: 26px !important;
    }
  }

  .warn-info {
    height: 275px;
    overflow-y: auto;
    overflow-x: hidden;

    .s-warning {
      font-size: 12px;
      color: #666666;
    }
  }

  .search_view {
    width: 20%;
    position: absolute;
    left: 21%;
    top: 1%;
    z-index: 1999;

    .el-input__inner {
      background-color: rgb(54, 48, 48, 0.5);;
      color: white;
    }
  }

  @keyframes fade {
    from {
      opacity: 1.0;
    }
    50% {
      opacity: 0.4;
    }
    to {
      opacity: 1.0;
    }
  }

  @-webkit-keyframes fade {
    from {
      opacity: 1.0;
    }
    50% {
      opacity: 0.7;
    }
    to {
      opacity: 1.0;
    }
  }

  .blink {
    color: white;
    padding: 10px;
    font-size: 15px;
    animation: fade 600ms infinite;
    -webkit-animation: fade 600ms infinite;
  }
</style>
